<template>
  <common-list>
    <common-search slot="search" @search="handleQuery" @reset="resetQuery">
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        @submit.native.prevent
        label-width="80px"
      >
        <!--      <el-form-item label="操作系统用户" prop="osUsername">-->
        <!--        <common-input v-model="queryParams.osUsername" clearable/>-->
        <!--      </el-form-item>-->
        <el-form-item label="敏感等级" prop="sensitiveLevelName">
          <el-select v-model="queryParams.sensitiveLevelName">
            <el-option label="全部" :value="null"></el-option>
            <el-option
              v-for="(item, index) in sensitiveLevelNameList"
              :key="index"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="敏感分类" prop="sensitiveName">
          <div class="maxRowsDiv">
            <el-cascader
              style="width: 100%"
              :options="treeListArr"
              :show-all-levels="false"
              v-model="queryParams.sensitiveName"
              :props="{
                label: 'typeName',
                value: 'typeName',
                emitPath: false,
              }"
              checkStrictly
              clearable
              ref="cascader"
              ><template slot-scope="{ node, data }">
                <common-marquee-text
                  :content="data.typeName"
                ></common-marquee-text>
              </template>
            </el-cascader>
          </div>
        </el-form-item>

        <el-form-item label="敏感字段" prop="sensitiveWord">
          <el-select v-model="queryParams.sensitiveWord">
            <el-option label="全部" :value="null"></el-option>
            <el-option
              v-for="(item, index) in sensitiveWordList"
              :key="index"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="重要数据" prop="importantData">
          <el-select v-model="queryParams.importantData">
            <el-option label="全部" :value="null"></el-option>
            <el-option
              v-for="(item, index) in sensitiveLabelList"
              :key="index"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="核心数据" prop="coreData">
          <el-select v-model="queryParams.coreData">
            <el-option label="全部" :value="null"></el-option>
            <el-option
              v-for="(item, index) in coreDataList"
              :key="index"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据库IP" prop="dbIp">
          <common-input
            v-model="queryParams.dbIp"
            clearable
            @enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="库名" prop="dbName">
          <common-input
            v-model="queryParams.dbName"
            clearable
            @enter="handleQuery"
          />
        </el-form-item>

        <el-form-item label="表" prop="tableName">
          <common-input
            v-model="queryParams.tableName"
            clearable
            @enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="客户端IP" prop="sourceIp">
          <common-input
            v-model="queryParams.sourceIp"
            clearable
            @enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="捕获时间" prop="captureTime">
          <el-date-picker
            popper-class="timePopper"
            v-model="captureTime"
            type="datetimerange"
            @change="dateChange"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            :default-time="['00:00:00', '23:59:59']"
            style="width: 520px"
            :clearable="false"
            :editable="false"
          >
          </el-date-picker>
        </el-form-item>

        <!--        <el-form-item label="敏感分类" prop="sensitiveName">-->
        <!--          <el-select v-model="queryParams.sensitiveName">-->
        <!--            <el-option label="全部" :value="null"></el-option>-->
        <!--            <el-option-->
        <!--              v-for="(item,index) in sensitiveNameList"-->
        <!--              :key="index"-->
        <!--              :label="item"-->
        <!--              :value="item"-->
        <!--            >-->
        <!--            </el-option>-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->

        <!-- <el-form-item label="访问账号" prop="dbAccount">
          <common-input
            v-model="queryParams.dbAccount"
            clearable
            @enter="handleQuery"
          />
        </el-form-item> -->
      </el-form>
    </common-search>
    <common-table slot="content" v-loading="loading" :data="accessList">
      <el-table-column
        label="数据库IP"
        align="left"
        prop="dbIp"
        show-overflow-tooltip
        width="160"
        fixed
      />
      <el-table-column
        width="120px"
        label="端口号"
        align="left"
        prop="dbPort"
      />
      <el-table-column
        label="库名"
        align="left"
        prop="dbName"
        show-overflow-tooltip
      />
      <el-table-column
        label="表"
        align="left"
        prop="tableName"
        width="160"
        show-overflow-tooltip
      />
      <el-table-column
        label="数据库类型"
        align="left"
        prop="dbType"
        width="160"
        show-overflow-tooltip
      />
      <el-table-column
        label="实例名/服务名"
        align="left"
        prop="serviceName"
        width="160"
        show-overflow-tooltip
      />
      <el-table-column
        label="库名"
        align="left"
        prop="dbName"
        width="160"
        show-overflow-tooltip
      />
      <el-table-column
        label="用户名"
        align="left"
        prop="dbAccount"
        width="160"
        show-overflow-tooltip
      />
      <el-table-column
        label="敏感等级"
        align="left"
        prop="sensitiveLevelName"
      />
      <el-table-column
        label="敏感分类"
        align="left"
        prop="sensitiveName"
        show-overflow-tooltip
      >
      </el-table-column>

      <el-table-column
        label="客户端IP"
        align="left"
        prop="sourceIp"
        width="160px"
      />
      <!-- <el-table-column
        label="访问账号"
        align="left"
        prop="dbAccount"
        width="180px"
      /> -->
      <el-table-column
        label="敏感字段"
        align="left"
        prop="sensitiveWord"
        width="180px"
        show-overflow-tooltip
      />
      <el-table-column
        label="重要数据"
        align="left"
        prop="importantData"
        width="180px"
        show-overflow-tooltip
      />
      <el-table-column
        label="核心数据"
        align="left"
        prop="coreData"
        width="180px"
        show-overflow-tooltip
      />
      <el-table-column
        label="捕获时间"
        align="left"
        prop="createTime"
        width="160px"
      />
      <el-table-column label="操作" align="left" width="52" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" @click="showInfo(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </common-table>
    <pagination
      slot="pagination"
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <common-info-dialog :visible.sync="infoShow" @cancel="hiddenInfo">
      <common-info-table>
        <common-info-table-cell label="库名" width="50%">{{
          info.dbName
        }}</common-info-table-cell>
        <common-info-table-cell label="表名" width="50%">{{
          info.tableName
        }}</common-info-table-cell>
        <common-info-table-cell label="IP" width="50%">{{
          info.dbIp
        }}</common-info-table-cell>
        <common-info-table-cell label="端口号" width="50%">{{
          info.dbPort
        }}</common-info-table-cell>
        <!--        <common-info-table-cell label="数据库服务名" width="50%">{{ info.serviceName }}</common-info-table-cell>-->
        <common-info-table-cell label="数据库类型" width="50%">{{
          info.dbType
        }}</common-info-table-cell>
        <common-info-table-cell label="敏感等级" width="50%">{{
          info.sensitiveLevelName
        }}</common-info-table-cell>
        <common-info-table-cell label="敏感分类" width="50%">{{
          info.sensitiveName
        }}</common-info-table-cell>
        <common-info-table-cell label="客户端IP" width="50%">{{
          info.sourceIp
        }}</common-info-table-cell>
        <common-info-table-cell label="重要数据" width="50%">{{
          info.importantData
        }}</common-info-table-cell>
        <common-info-table-cell label="核心数据" width="50%">{{
          info.coreData
        }}</common-info-table-cell>
        <!-- <common-info-table-cell label="访问账号" width="50%">{{
          info.dbAccount
        }}</common-info-table-cell> -->
        <common-info-table-cell label="捕获时间" width="100%">{{
          info.createTime
        }}</common-info-table-cell>
        <common-info-table-cell label="敏感字段" width="100%">{{
          info.sensitiveWord
        }}</common-info-table-cell>
        <common-info-table-cell label="sql语句" width="100%">{{
          info.sql
        }}</common-info-table-cell>
      </common-info-table>
    </common-info-dialog>
  </common-list>
</template>

<script>
import {
  querySensTableAccessList,
  queryAccessList,
  queryDataTypeTreeList,
  spreadCatatoryList,
} from "@/api/datascan/ranking";
import InfoTable from "@/components/InfoTable";
import { level, queryList as queryLevelList } from "@/api/datascan/level/level";
import { queryDataTypeList } from "@/api/datascan/datatype/type";
import BaseList from "@/mixins/BaseList";
import { parseTime } from "@/utils/ruoyi";

export default {
  name: "Access",
  mixins: [BaseList],
  components: {
    InfoTable,
  },
  data() {
    let now = parseTime(new Date());
    let start = `${parseTime(
      new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000)
    )}`;
    return {
      treeListArr: [],
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 敏感信息访问详情表格数据
      accessList: [],
      captureTime: [start, now],
      lastTime: [start, now],
      sensitiveLevelNameList: [],
      sensitiveWordList: [],
      sensitiveNameList: [],
      sensitiveLabelList: [],
      cuttentTime: "",

      pickerOptions: {
        //点击时，选择的是开始时间，也就是minDate
        onPick: ({ maxDate, minDate }) => {
          this.cuttentTime = minDate.getTime();
          if (maxDate) {
            //解除限制
            this.cuttentTime = "";
          }
        },
        disabledDate: (time) => {
          //是否限制的判断条件
          if (this.cuttentTime !== "") {
            const one = 30 * 24 * 3600 * 1000;
            const minTime = this.cuttentTime - one;
            const maxTime = this.cuttentTime + one;
            console.log(time.valueOf() > Date.now());

            return time.getTime() < minTime || time.getTime() > maxTime;
          }
        },
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        dbName: null,
        // dbNameLikeFlag: true,
        dbIp: null,
        // tableNameSourceLikeFlag: true,
        // tableNameSource: null,
        // osUsername: null,
        // osUsernameLikeFlag: true,
        // dbUsername: null,
        // dbUsernameLikeFlag: true,
        levelName: null,
        typeName: null,
        startTime: start,
        endTime: now,
        // clientIp: null,
        tableName: null,
        sourceIp: null,
        sensitiveLevelName: null,
        sensitiveWord: null,
        sensitiveName: null,
        sensitiveLabel: null,
        coreData: null,
        importantData: null,
        // dbAccount: null,
      },
      levelList: [],
      typeNameList: [],

      infoShow: false,
      info: {},
      queryLabel: null,
      queryValue: null,
      coreDataList: null,
    };
  },
  created() {},
  methods: {
    qq(scope) {
      console.log(scope);
    },

    //敏感等级下拉
    sensitivityLevel() {
      spreadCatatoryList({
        sensitiveFlag: 0,
        statNames: "sensitiveLevelName",
      }).then((res) => {
        if (res && res.code === 200) {
          // console.log(res)
          this.sensitiveLevelNameList = res.data;
        } else {
          this.sensitiveLevelNameList = [];
        }
      });
    },
    //敏感字段下拉
    sensitivityWords() {
      spreadCatatoryList({
        sensitiveFlag: 0,
        statNames: "sensitiveWord",
      }).then((res) => {
        // console.log(res)
        if (res && res.code === 200) {
          this.sensitiveWordList = res.data;
        } else {
          this.sensitiveWordList = [];
        }
      });
    },
    //敏感分类下拉
    sensitivityTypes() {
      queryDataTypeTreeList().then((res) => {
        if (res && res.code === 200) {
          console.log("=====>", res);
          console.log(222);
          this.treeListArr = res.data.data;
        } else {
          this.treeListArr = [];
        }
      });
    },
    //重要数据下拉
    sensitiveLabels() {
      spreadCatatoryList({
        sensitiveFlag: 0,
        statNames: "importantData",
      }).then((res) => {
        // console.log(res)
        if (res && res.code === 200) {
          this.sensitiveLabelList = res.data;
        } else {
          this.sensitiveLabelList = [];
        }
      });
    },
    //核心数据下拉
    sensitivityCoreDataList() {
      spreadCatatoryList({
        sensitiveFlag: 0,
        statNames: "coreData",
      }).then((res) => {
        // console.log(res)
        if (res && res.code === 200) {
          this.coreDataList = res.data;
        } else {
          this.coreDataList = [];
        }
      });
    },
    /** 查询敏感信息访问详情列表 */
    getList() {
      this.loading = true;
      queryAccessList(this.queryParams)
        .then((res) => {
          if (res && res.code === 200) {
            console.log(res);
            this.accessList = res.data.result;
            this.total = res.data.total;
          } else {
            this.accessList = [];
            this.total = 0;
            this.handleListTips(res);
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    /** 查询按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.beforeQuery();
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetInitQuery();
      this.queryParams = this.$options.data().queryParams;

      let now = parseTime(new Date());
      let start = `${parseTime(
        new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000)
      )}`;
      this.queryParams.startTime = start;
      this.queryParams.endTime = now;
      this.captureTime = [start, now];
    },
    /**
     * 日期选择数据改变方法
     */
    dateChange() {
      let endTime = null,
        startTime = null;
      console.log(this.captureTime);
      if (this.captureTime && this.captureTime.length > 0) {
        let time1 = new Date(this.captureTime[0]).getTime();
        let time2 = new Date(this.captureTime[1]).getTime();
        if (time2 - time1 > 31 * 24 * 3600 * 1000) {
          this.captureTime = this.lastTime;
          return;
        }

        startTime = this.captureTime[0];
        endTime = this.captureTime[1];

        this.lastTime = this.captureTime;
      }
      this.queryParams.startTime = startTime || null;
      this.queryParams.endTime = endTime || null;
    },
    showInfo(item) {
      this.info = item;
      this.infoShow = true;
      console.log(item);
    },
    hiddenInfo() {
      this.infoShow = false;
    },
    getLevelList() {
      level({}).then((res) => {
        if (res && (res.code === 200 || res.rescode === 200)) {
          this.levelList = res.data.dataList.reduce((r, c) => {
            r.push({
              label: c.name,
              value: c.levelId,
            });
            return r;
          }, []);
        } else {
          this.levelList = [];
        }
      });
    },

    getLevelNameList() {
      queryDataTypeList({}).then((res) => {
        if (res && (res.code === 200 || res.rescode === 200)) {
          this.typeNameList = res.data.dataList.reduce((r, c) => {
            r.push({
              label: c.typeName,
              value: c.typeId,
            });
            return r;
          }, []);
        } else {
          this.typeNameList = [];
        }
      });
    },

    beforeQuery() {
      if (this.queryLabel) {
        let labelFlagKey = `${this.queryLabel}LikeFlag`;
        this.queryParams[labelFlagKey] =
          this.queryParams[this.queryLabel] !== this.queryValue;
      }
    },

    resetInitQuery() {
      if (this.queryLabel) {
        this.queryParams[this.queryLabel] = null;
        this.queryLabel = null;
        this.queryValue = null;
      }
    },

    handleInitQuery() {
      let { label, value } = this.$route.query;

      if (label) {
        this.queryLabel = label;
        this.queryValue = value;

        let labelFlagKey = `${label}LikeFlag`;

        let keys = Reflect.ownKeys(this.queryParams);
        let labelIndex = keys.findIndex((key) => key === label);
        if (labelIndex !== -1) this.queryParams[label] = value;

        let labelFlagIndex = keys.findIndex((key) => key === labelFlagKey);
        if (labelFlagIndex !== -1) this.queryParams[labelFlagKey] = false;
      }
    },
  },
  mounted() {
    this.handleInitQuery();
    this.sensitivityCoreDataList();
    this.getList();
    // this.getLevelList();
    this.getLevelNameList();
    this.sensitivityLevel();
    this.sensitivityWords();
    this.sensitivityTypes();
    this.sensitiveLabels();
  },
};
</script>
<style lang="scss" scoped>
.timePopper.el-date-range-picker {
  .el-button--text {
    display: none;
  }
}
</style>
